<template>
	<view class="body">
		<view class="u-m-p-50 optionBar">
			<view class="icon iconfont icon-zuojiantou" @click.stop="back"></view>
			<!-- <image src="../../static/icon/list.png" mode=""></image> -->
			<view class="u-demo-area u-flex u-row-center">
				<u-dropdown :close-on-click-mask="true" ref="uDropdown" :activeColor="activeColor"
					:borderBottom="borderBottom">
					<u-dropdown-item @change="change" v-model="value1" :title="farm" :options="options">
					</u-dropdown-item>
				</u-dropdown>
			</view>
		</view>
		<text class="textStyle">农田详情</text>
		<view class="detailInfo flex-ja-ac">
			<view class="img">
				<image :src="'https://crop.lxylw.design'+farmList[currentIndex].soilphotourl" mode=""></image>
			</view>
			<view class="list">
				<view class="item">
					<view class="title">名称：</view>
					<view class="content" :title="farmList[currentIndex].soilname">{{farmList[currentIndex].soilname}}</view>
				</view>
				<view class="item">
					<view class="title">作物：</view>
					<view class="content">{{cropList[farmList[currentIndex].crop-1].label}}</view>
				</view>
				<view class="item">
					<view class="title">土壤：</view>
					<view class="content">{{soilList[farmList[currentIndex].soiltype-1].label}}</view>
				</view>
				<view class="item">
					<view class="title">当前含水量：</view>
					<view class="content">{{farmList[currentIndex].curwater}}%</view>
				</view>
			</view>
		</view>
		<text class="textStyle">更多信息</text>
		<view class="detailInfo infoMore">
			<view class="list">
				<view class="item">
					<view class="title">灌溉方式：</view>
					<view class="content">{{farmList[currentIndex].watertype}}</view>
				</view>
				<view class="item">
					<view class="title">面积：</view>
					<view class="content">{{farmList[currentIndex].waterarea}}亩</view>
				</view>
				<view class="item">
					<view>地址：</view>
					<view class="content" :title="farmList[currentIndex].place">{{farmList[currentIndex].place}}</view>
				</view>
			</view>
		</view>
		<text class="textStyle">灌溉历史</text>
		<view class="history">
			<view class="table">
				<view class="titleBox flex-ja-ac">
					<view>时间</view>
					<view>灌溉量（m³）/亩</view>
				</view>
				<view class="item flex-ja-ac">
					<view>2021/5/17</view>
					<view>7</view>
				</view>
				<view class="item flex-ja-ac">
					<view>2021/4/22</view>
					<view>10</view>
				</view>
				<view class="item flex-ja-ac">
					<view>2021/4/12</view>
					<view>6</view>
				</view>
				<view class="item flex-ja-ac">
					<view>2021/3/23</view>
					<view>9</view>
				</view>
				<view class="item flex-ja-ac">
					<view>2021/3/12</view>
					<view>14</view>
				</view>
				<view class="item flex-ja-ac">
					<view>2020/2/19</view>
					<view>3</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getFarm} from "@/common/entity/farm.js"
	import { soilList,cropList } from "@/common/entity/dataset.js"
	export default {
		data() {
			return {
				options: [{
						label: '广西桂林农场',
						value: 1,
					},
					{
						label: '云南大理酒店',
						value: 2,
					},
					{
						label: '广西北海农场',
						value: 3,
					},
					{
						label: '云南洱海花园',
						value: 4,
					}
				],
				currentIndex:0,
				farmList:null,
				soilList:null,
				cropList:null,
				farm: '',
				value1:'1',
				borderBottom: false,
				activeColor: '#2979ff'
			}
		},
		onLoad(option){
			this.currentIndex = option.index
		},
		beforeMount() {
			this.farmList = getFarm()
			this.options = []
			for(let i in this.farmList){
				console.log(this.farmList[i])
				this.options.push({
					label:this.farmList[i].soilname,
					value:parseInt(i)+1
				})
			}
			this.farm = this.options[this.currentIndex].label
			this.value1 = parseInt(this.currentIndex)+1
			this.soilList = soilList
			this.cropList = cropList
		},
		methods: {
			change(index) {
				console.log(index)
				this.farm = this.options[index - 1].label
				this.currentIndex = index-1
			},
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		background-color: #eee;
		min-height: 1340rpx;
	}

	.optionBar {
		border-bottom: 1rpx solid #ddd;
		background-color: #fff;
		margin-bottom: 20rpx;

		.icon-zuojiantou {
			position: absolute;
			left: 40rpx;
			top: 15rpx;
			// height: 48rpx;
			// width: 48rpx;
			font-size: 50rpx;
			z-index: 999;
			font-weight: 600;
		}
	}

	.detailInfo {
		min-height: 240rpx;
		margin: 20rpx;
		border-radius: 16rpx;
		background-color: #fff;
		color: #606266;

		.img {
			height: 260rpx;
			width: 36%;
			overflow: hidden;

			image {
				height: 100%;
				width: 100%;
				border-radius: 10rpx;
			}
		}

		.list {
			width: 50%;
			.item {
				margin: 30rpx;
				margin-left: 0;
				display: flex;
				height: 48rpx;
				overflow: hidden;
				white-space:nowrap; 
				text-overflow: ellipsis;
			}
		}
	}
	
	.infoMore{
		
		min-height: 240rpx;
		padding: 20rpx;
		padding-top: 10rpx;
		.list {
			width: 100%;
			.item {
				margin: 30rpx;
				margin-left: 0;
				display: flex;
			}
		}
	}

	.history {
		min-height: 320rpx;
		margin: 20rpx;
		border-radius: 16rpx;
		background-color: #fff;
		padding: 20rpx 0;
		box-sizing: border-box;
		color: #606266;

		.table {

			// margin-top: 20rpx;
			view {
				width: 90vw;
				text-align: center;
			}

			.titleBox {
				font-size: 32rpx;
			}

			.item {
				margin-top: 20rpx;
			}
		}
	}

	.textStyle {
		margin-left: 40rpx;
		color: #606266;
	}

	.textStyle:after {
		position: absolute;
		width: 8rpx;
		height: 38rpx;
		content: "";
		left: 24rpx;
		border-radius: 10rpx;
		background-color: #606266;
	}
</style>
